import * as React from 'react';
import { Button, Card, Tag, Tooltip, Divider, Icon, Popconfirm } from 'antd';
import makeHoc from 'components/common/makeHoc';
import CONFIG from 'constants/config';

import { fetchLevelList } from 'actions/review';

import LoadableComponent from 'components/common/LoadableComponent';
const LoadablePopWordSelect = LoadableComponent(() => import('pages/review/word/PopToSelect'));

import { isEqualWithNumber } from 'utils/utils';

interface EditWordProps {
  dispatch: (action: any) => any;
  handleCallback: (urls: string[]) => any;
  words: any[];
  levels: any[];
  selectMax?: number;
}

interface EditWordState {
  isSelectWord: boolean;
  selectedItems: any[];
}
class EditWord extends React.Component<EditWordProps, EditWordState> {
  static defaultProps: EditWordProps = {
    dispatch: () => {},
    handleCallback: () => {},
    words: [],
    levels: [],
    selectMax: 0,
  };
  constructor(props: EditWordProps) {
    super(props);
    this.state = {
      isSelectWord: false,
      selectedItems: props.words,
    };
  }

  componentWillMount() {
    const { dispatch } = this.props;
    dispatch(fetchLevelList());
  }

  onCallback = () => {
    const { handleCallback } = this.props;
    const { selectedItems } = this.state;

    handleCallback(selectedItems);
  };

  handleRemoveWord(targetId: number) {
    const { selectedItems } = this.state;

    const leftItems = selectedItems.filter((item: any) => {
      return !isEqualWithNumber(item.id, targetId);
    });

    this.setState({
      selectedItems: leftItems,
    });
  }

  handleCloseModal = () => {
    this.setState({
      isSelectWord: false,
    });
  };

  handleOpenModal = () => {
    this.setState({
      isSelectWord: true,
    });
  };

  handlePopSubmit = (selectedItems: any[]) => {
    const { handleCallback } = this.props;
    this.handleCloseModal();

    this.setState({
      selectedItems,
    });
  };

  renderItems = (): any => {
    const { selectedItems } = this.state;
    const { levels } = this.props;

    if (selectedItems.length === 0) {
      return (
        <p className="loading-placeholder">
          还没有数据，&nbsp;
          <a href="javascript:void(0);" onClick={this.handleOpenModal}>
            <Icon type="plus" />添加
          </a>
        </p>
      );
    }

    const levelColors = ['#2db7f5', '#87d068', '#108ee9'];

    return (
      <div>
        <div
          style={{
            border: '1px solid #aaa',
            marginTop: 12,
            padding: 12,
            height: 500,
            width: 500,
            display: 'inline-block',
          }}>
          {selectedItems.map((word: any) => {
            const title = (
              <Card>
                {word.chinese}
                <Divider type="vertical" key="line" />
                L{word.level}
              </Card>
            );
            const color = word.level <= levelColors.length ? levelColors[word.level - 1] : '';
            return (
              <Tooltip title={title} key={word.id}>
                <Tag color={color} key={word.id}>
                  {word.word}&nbsp;&nbsp;
                  <Popconfirm
                    placement="bottom"
                    title="确认要删除此单词吗？"
                    onConfirm={e => {
                      e.stopPropagation();
                      this.handleRemoveWord(word.id);
                    }}
                    onCancel={e => {
                      e.stopPropagation();
                    }}
                    okText="确认"
                    cancelText="取消">
                    <Icon
                      type="cross"
                      onClick={e => {
                        e.stopPropagation();
                      }}
                    />
                  </Popconfirm>
                </Tag>
              </Tooltip>
            );
          })}
        </div>
        <div>
          {levels.map((item: any) => (
            <Tag color={item.level <= levelColors.length ? levelColors[item.level - 1] : ''}>
              L{item.level}
            </Tag>
          ))}
          <div style={{ float: 'right' }}>
            <Button
              disabled={selectedItems.length === 0}
              type="primary"
              onClick={e => {
                e.preventDefault();
                this.onCallback();
              }}>
              保存
            </Button>
          </div>
        </div>
      </div>
    );
  };

  render() {
    const { isSelectWord, selectedItems } = this.state;
    const { selectMax } = this.props;

    return (
      <div>
        {isSelectWord && (
          <LoadablePopWordSelect
            onCancel={this.handleCloseModal}
            onOk={this.handlePopSubmit}
            ownItems={selectedItems}
            selectMax={selectMax}
          />
        )}
        {this.renderItems()}
      </div>
    );
  }
}

interface OwnProps {
  words: any[];
  handleCallback: () => any;
}

function mapStateToProps(state: any, ownProps: OwnProps) {
  const { words, handleCallback } = ownProps;
  const { levels } = state.review;

  return {
    words,
    levels,
    handleCallback,
  };
}

export default makeHoc(mapStateToProps)(EditWord, {
  addWord() {
    this.handleOpenModal();
  },
});
